<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WISSC轮滑教培服务网-查询系统</title>
<#assign base=request.contextPath  />
    <link rel="icon" href="${base}/favicon.ico">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${base}/js/feng.js"></script>
    <script src="${base}/frame/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery-1.4.4.min.js"></script>
    <script src="${base}/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/css/hzw-city-picker.css">
    <script type="text/javascript" src="${base}/js/city-data.js"></script>
    <script type="text/javascript" src="${base}/js/hzw-city-picker.min.js"></script>
    <script type="text/javascript" src="${base}/js/city-zk.js"></script>
    <script type="text/javascript" src="${base}/js/province.js"></script>
    <style type="text/css">
        form {
            padding: 10px;
        }

    </style>
</head>
<body>
<div style="background-color:  #E7141A">
    <i class="layui-icon layui-icon-shrink-right"  style="color: white">&nbsp;&nbsp;&nbsp;&nbsp;信息查询</i>
</div>

<form class="layui-form" action="">
    <div class="demoTable">
        <div class="layui-form-item">


            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="tel" id="username" name="username" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>




            <button class="layui-btn" data-method="offset"
                    type="button" style="background-color: #0092EF;" onclick="onSubmint()">搜索
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置
            </button>
            <button class="layui-btn" data-method="offset"
                    type="button" style="background-color:#E7141A" onclick="deleteById()">批量删除
            </button>

        </div>

    <#-- <div id="test"></div>-->

    </div>

</form>
<div style="background-color:  #E7141A;">
    <i class="layui-icon layui-icon-shrink-right"  style="color: white">&nbsp;&nbsp;&nbsp;&nbsp;用户信息列表</i>
</div>
<table class="layui-hide" lay-filter="test" id="test"  lay-size="sm"></table>
<script type="text/html" id="barDemo">
    <i class="layui-icon layui-icon-edit" lay-event="edit" style="font-size: 20px;"></i>&nbsp;&nbsp;&nbsp;
    <i class="layui-icon layui-icon-delete layui-btn-xs" lay-event="del" href="javascript:void(0)"
       onclick="onDelete('{{d.id}}')"
       style="font-size: 20px;"></i>
</script>
<script>

    var cityPicker = new HzwCityPicker({
        data: data,
        target: 'cityChoice',
        valType: 'k',
        hideCityInput: {
            name: 'city',
            id: 'city'
        },
        hideProvinceInput: {
            name: 'areaId',
            id: 'areaId',
            val: 'q'
        },
        callback: function () {
        }
    });

    cityPicker.init();

    layui.use(['form', 'layedit', 'laydate', 'table'], function () {

        var form = layui.form
                , $ = layui.jquery
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , table = layui.table;

        //执行一个laydate实例
        laydate.render({
            elem: '#regTime' //指定元素
        });

        var whereData = {}
        whereData.username = $("#username").val();

        table.render({
            elem: '#test'
            ,where:whereData
            , url: '${base}/user/selectMyPage' //数据接口
            , title: '用户数据表'
            , totalRow: true
            , toolbar: '#toolbarDemo'//打印
            , cols: [[
                {type: 'checkbox'},
                {
                    field: 'id', title: '序号', templet: function (val) {
                        return val.LAY_INDEX
                    }, align: 'center'
                }
                , {field: 'username', title: '用户名', align: 'center'}
                , {field: 'password', title: '密码', align: 'center'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 100, align: 'center'}
            ]]
            , id: 'testReload'
            , page:
                    {
                        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , theme:
                                '#0092EF'
                        , limit:
                                10
                    }

        });
        $('#btn1').on('click', function () {
            var sechLin = $("#sech").val();
            var whereData = {};
        });
        var active = {
            offset: function (othis) {
                var type = othis.data('type')
                        , text = othis.text();
                layer.open({
                    type: 2,
                    title: '添加用户',
                    area: ['400px', '280px'], //高 宽
                    shadeClose: false,
                    //弹出的页面路径
                    content: '${base}/user/user_add.html',//路径

                });
            }
        };
        $('#btn2').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        //编辑
        table.on('tool(test)', function (obj) {
            var layEvent = obj.event;
            if (layEvent == "edit") {
                var data = obj.data;
                //示范一个公告层
                layer.open({
                    type: 2,
                    title: '编辑用户',
                    shadeClose: false,
                    offset: 't',
                    area: ['400px', '280px'],
                    content: '${base}/user/user_edit.html',//数据接口
                    success: function (layero, index) {
                        var iframeWin = window[layero.find
                        ('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        iframeWin.$("#id").val(data.id)
                        iframeWin.$("#username").val(data.username)
                        iframeWin.$("#password").val(data.password)
                        //渲染一下form表单
                        iframeWin.layui.form.render('select')
                    }
                });
            }
        });
    });

    // 搜索
    function onSubmint() {
        var whereData = {}
        whereData.username = $("#username").val();
        var table = layui.table;
        //表刷新方法
        table.reload('testReload', {
            url: '${base}/user/selectMyPage'//数据接口
            , where: whereData
            //设定异步数据接口的额外参数
        });
    }

    //删除
    function onDelete(id) {
        layer.confirm('真的要删除吗?', function (index) {
            var data = {};
            data.id = id;
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                url: "${base}/user/delete",
                data: JSON.stringify(data),
                sync: false,
                success: function (data) {
                    //alert("删除成功")
                    var table = layui.table;
                    //表刷新方法
                    table.reload('testReload', {
                        url: '${base}/user/selectMyPage'
                        , where: {} //设定异步数据接口的额外参数
                    });
                    //关闭删除是否删除的提示框
                    layer.close(index);
                }
            });
        });
    }
    //批量删除
    function deleteById(){
        var table = layui.table;
        var checkStatus = table.checkStatus('testReload')
        var data = checkStatus.data;
        var ids = [];
        var a = "";
        for (var i = 0; i < data.length; i++) {
            ids.push(data[i].id)
            a+=","+data[i].id
        }
        if (ids.length === 0) {
            layer.msg("请选择一个呗");
            return;
        }
        $.ajax({
            type: "POST",
            url: "${base}/user/deleteBtId",
            data: {ids: a},
            sync: false,
            success: function (data) {
                layer.msg("删除成功")
                var table = layui.table;
                //表刷新方法
                table.reload('testReload', {
                    url: '${base}/user/selectMyPage'//数据接口
                    , where: {} //设定异步数据接口的额外参数
                    //,height: 300
                });
            }
        });
    }

</script>
</body>
</html>